<template>
    <glsx-dialog :show="showPopup" :title="id ? '编辑城市' : '新增城市'" @close="closeDialog()" v-if="showPopup">
        <div class="">
            <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="add_form" label-width="100px" size="small">
                <el-form-item label="选择城市：" prop="area">
                    <!-- <AreaSelect v-model="addForm.name" class="a_input"></AreaSelect> -->
                    <el-cascader v-model="addForm.area" :options="options" :props="cascaderProps" class="a_input" @change="onChange"></el-cascader>
                </el-form-item>
                <el-form-item label="城市拼音：">
                    <el-input v-model="addForm.pinyin" class="a_input"></el-input>
                </el-form-item>
                <el-form-item label="是否热门：" prop="hotFlag">
                    <el-radio-group v-model="addForm.hotFlag">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否上架：" prop="onShelf">
                    <el-radio-group v-model="addForm.onShelf">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否预约：" prop="appointmentFlag">
                    <el-radio-group v-model="addForm.appointmentFlag">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序时间：" prop="orderTime">
                    <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer">
            <el-button type="primary" size="small" :loading="loading" @click="saveInfo">确定</el-button>
            <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
        </div>
    </glsx-dialog>
</template>
<script>
import { deepClone, showToast } from "@/common/util";
import {
    ADDCITYINFO,
    EDITCITYINFO,
    GETCITYINFO,
    DELETECITYINFO,
    UPDATECITYINFO,
} from "@/http/system";
import { SAVE_CITY_COMPLEMENT_INFO } from '@/http/configuration'
import AreaSelect from '@/components/province/index.vue'
import cityJson from '@/assets/json/second.json'
export default {
    name: "AddCity",
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        id: {
            type: [String, Number],
            default: "",
        },
        type: {
            type: String,
            default: "",
        },
    },
    components: {
        AreaSelect
    },
    watch: {
        value: {
            handler: function (n) {
                this.showPopup = n;
            },
            immediate: true,
        },
        id: {
            handler: function (n) {
                if (n) {
                    this.getInfo(n);
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            showPopup: false,
            addForm: {},
            addFormRules: {
                area: [{ required: true, message: "请选择城市", trigger: "change" }],
                hotFlag: [{ required: true, message: '请选择是否热门', trigger: "change" }],
                hotFlag: [{ required: true, message: '请选择是否热门', trigger: "change" }],
                onShelf: [
                    { required: true, message: "请选择是否上架", trigger: "change" },
                ],
                appointmentFlag: [{ required: true, message: '请选择是否预约', trigger: "change" }],
                orderTime: [
                    { required: true, message: "请选择排序时间", trigger: "change" },
                ],
            },
            loading: false,
            options: cityJson,
            cascaderProps: {
                value: "code",
                label: "name",
                children: "children",
            },
        };
    },
    methods: {
        // 关闭弹框
        closeDialog() {
            this.$emit("input", false);
            this.addForm = {};
        },

        // 获取详情
        getInfo(id) {
            let _this = this;
            let oParams = {};
            oParams.id = id;
            GETCITYINFO(oParams).then((res) => {
                let obj = res.data || {};
                let o = { ...obj };
                o.area = [o.provCode,o.code]
                delete o.enableStatus
                _this.addForm = o;
            });
        },

        // 参数处理
        getParams() {
            let o = deepClone(this.addForm);
            if (o.area && o.area.length) {
                o.code = o.area[1]
                o.provCode = o.area[0]
            }
            delete o.area;
            return o;
        },

        // 保存数据
        saveInfo() {
            let _this = this;
            _this.$refs.addForm.validate((valid) => {
                if (!valid) {
                    return false;
                }
                let oParams = _this.getParams();
                let callBack = SAVE_CITY_COMPLEMENT_INFO;
                let msg = "新增成功";

                // 编辑
                if (_this.id) {
                    oParams.id = _this.id;
                    callBack = EDITCITYINFO;
                    msg = "编辑成功";
                }

                callBack(oParams).then((res) => {
                    if (res.code == 200) {
                        showToast({
                            message: msg,
                            type: "success",
                        });
                        _this.closeDialog();
                        _this.$emit("change");
                    }
                });
            });
        },

        // 监听城市选择
        onChange(e) {
            let list = this.options;
            let province = list.find(k => k.code == e[0]);
            let city = province.children.find(k => k.code == e[1]);
            this.$set(this.addForm, 'provName', province.name)
            this.$set(this.addForm, 'name', city.name)
            console.log([province.name, city.name])
        },
    },
};
</script>
<style lang="scss" scoped>
.add_form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        flex: 0 0 50%;

        .a_input {
            width: 100%;

            ::v-deep .el-cascader {
                width: 100%;
            }
        }
    }
}
</style>